<template>
  <div class="dy-main PeriodChange_Index">
    <div class="dy-header">
      <x-header title="定活互转" :left-options="{preventGoBack:true}" @on-click-back="back"></x-header>
      <div class="tabWrap">
        <!-- <button-tab v-model="tabSelected">
          <button-tab-item @on-item-click="tabShow = '1'">活期转定期</button-tab-item>
          <button-tab-item @on-item-click="tabShow = '2'">定期转活期</button-tab-item>
        </button-tab> -->
        <group gutter="0">
          <zx-button type="tab" :data="['活期转定期', '定期转活期']" @on-click="clicktab"></zx-button>
        </group>
      </div>
    </div>
    <div class="dy-body">
      <div class="tabContent" v-show="tabShow === '1'">
        <group label-width="2rem" gutter="0.05rem">
          <cell title="付款账号" :value="cardNo" ></cell>
          <cell title="币种" :value="currType" ></cell>
          <cell title="可用余额" :value="actualBal" ></cell>
          <x-input title="转存金额" v-model="tranAmt" placeholder="请输入转存金额"></x-input>
          <cell title="推荐人工号"></cell>
        </group>
        <div class="gridWrap">
          <grid :cols="3" :show-lr-borders="false" :show-vertical-dividers="false">
            <grid-item v-for="(item, index) in rateArr" :key="index" @click.native="gridCurrent = index">
              <div class="grid-box" :class="gridCurrent === index ? 'current' : null">
                <h2>{{item.fxdPeriod}}</h2>
                <span>{{item.fxdRate}}</span>
              </div>
            </grid-item>
          </grid>
        </div>
        <div class="sBottom">
          <x-button class="subBtn" type="primary" action-type="button" @click.native='submit(1)'>确认</x-button>
          <p>温馨提示：<br />定期到期后将自动转到活期账户</p>
        </div>
      </div>
      <div class="tabContent" v-show="tabShow === '2'">
        <group gutter="0.05rem">
          <popup-radio title="付款账号" :options="cardList" v-model="cardNo"></popup-radio>
          <cell title="存入日" :value="startDate" is-link></cell>
          <cell title="到期日" :value="endDate" is-link></cell>
          <cell title="年利率" :value="fxdRate" is-link></cell>
          <cell title="存期" :value="fxdPeriod" is-link></cell>
          <cell title="本金（元）" :value="tranAmt" is-link></cell>
          <cell title="定期账户" :value="cardNo" is-link></cell>
        </group>
        <div class="sBottom">
          <x-button class="subBtn" type="primary" action-type="button" @click.native='submit(2)'>确认</x-button>
        </div>
      </div>
      <zx-dialog v-model="tipsShow" type="tips" butType="choose" :data="['取消', '确认']" title="定存确认" class="modalPeriod">
        <div slot="body" class="tips">
          <div class="tipItem"><h4>定存金额</h4><p>10000.00</p></div>
          <div class="tipItem"><h4>图形码</h4><input v-model="imgCode"><img src="../../../assets/img/imgCode.png" alt=""></div>
        </div>
      </zx-dialog>
    </div>
    <!--<div class="dy-footer"></div>-->
  </div>
</template>
<script>
// Todo 存单号列表
export default{
  data () {
    return {
      tabSelected: 0,
      tabShow: '1',
      gridCurrent: 0,
      cardNo: '6210 **** **** 0476', // 卡号
      fxdNo: '1234567890', // 存单号
      cashFlag: '1', // 钞汇标志
      currType: '1', // 币种
      actualBal: '', // 币种
      payeeNo: '6210 **** **** 8888', // 转出账户
      tranAmt: '', // 转出金额
      endDate: '20180505', // 到期日
      startDate: '20170909', // 起息日
      fxdRate: '0.03', // 利率
      fxdPeriod: '1', // 存期
      cardList: ['6210 **** **** 1219', '6210 **** **** 3341', '6210 **** **** 2567'],
      rateArr: [{
        fxdPeriod: '3个月',
        fxdRate: '年利率1.231%'
      }, {
        fxdPeriod: '6个月',
        fxdRate: '年利率1.521%'
      }, {
        fxdPeriod: '1年',
        fxdRate: '年利率2.231%'
      }, {
        fxdPeriod: '2年',
        fxdRate: '年利率2.731%'
      }, {
        fxdPeriod: '3年',
        fxdRate: '年利率3.231%'
      }, {
        fxdPeriod: '5年',
        fxdRate: '年利率6.231%'
      }],
      tipsShow: false, // 图形码弹框
      imgCode: 'ABXD', // 图形码
      requestData1: { // 活转定 请求
        cardNo: this.cardNo,
        currType: this.currType,
        cashFlag: this.cashFlag,
        tranAmt: this.tranAmt,
        fxdPeriod: this.fxdPeriod
      },
      requestData2: { // 定转活 请求
        cardNo: this.cardNo,
        currType: this.currType,
        cashFlag: this.cashFlag,
        fxdNo: this.fxdNo,
        tranAmt: this.tranAmt
      }
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    clicktab (val) {
      if (val === 0) {
        this.tabShow = '1'
      } else {
        this.tabShow = '2'
      }
    },
    submit (val) {
      this.tipsShow = true
    },
    gotoNext (val) { // 1活转定 2定转活
      let _this = this
      switch (val) {
        case 1:
          this.$bridge.callhandler('nativeRequest',
            JSON.stringify({
              'requstSource': 'internetRequest',
              'url': 'mstep.do?act=business',
              'params': {'method_Name': 'CI009004', 'user_Data': _this.requestData1}
            }),
            function (response) {
              response = JSON.parse(response)
              if (response.status === 0 || response.status === '0') {
                let returnData = response.data.data[0]
                _this.showPositionValue = true
                _this.status = 1
                const obj1 = Object.assign(returnData, {cardNo: _this.cardNo}, {tranAmt: _this.tranAmt}, {fxdPeriod: _this.fxdPeriod})
                _this.$router.push({name: 'Result', query: obj1})
              } else {
                console.log('fail')
              }
            })
          break
        case 2:
          this.$bridge.callhandler('nativeRequest',
            JSON.stringify({
              'requstSource': 'internetRequest',
              'url': 'mstep.do?act=business',
              'params': {'method_Name': 'CI009004', 'user_Data': _this.requestData2}
            }),
            function (response) {
              response = JSON.parse(response)
              if (response.status === 0 || response.status === '0') {
              // let returnData = response.data.data[0]
                _this.showPositionValue = true
                _this.status = 1
                const obj1 = Object.assign({endDate: _this.endDate}, {fxdRate: _this.fxdRate}, {cardNo: _this.cardNo}, {tranAmt: _this.tranAmt}, {fxdPeriod: _this.fxdPeriod})
                _this.$router.push({name: 'Result', query: obj1})
              } else {
                console.log('fail')
              }
            })
          break
        default:console.log('error')
      }
    },

    /**
       * 弹出框显示，并将点击的栏目序号赋给指定值
       * @param index
       */
    judge (index) {
      this.termSub = index // 将序号传入临时的一个值中
      this.show = true // 开启弹出框
    }
  },
  created () {
    this.cardNo = this.$route.query.cardNo
    this.currType = this.$route.query.currType
    this.actualBal = this.$route.query.actualBal
  }
}
</script>
<style lang="less">
  .PeriodChange_Index {
    .dy-header {
      height: 2.28rem;
      .tabWrap {
        padding: .4rem 1.76rem;
        background-color: #f7f8fa;
      }
    }
    .dy-body {
      padding-top: 2.28rem;
      overflow: auto;
      .weui-cell {
        padding: 13px 15px;
        font-size: .28rem;
        line-height: normal;
      }
      .gridWrap {
        padding: .11rem .09rem;
        .weui-grid {
          position: relative;
          float: left;
          justify-items: center;
          margin: .15rem .22rem .15rem;
          padding: 0;
          width: auto;
          .grid-box {
            width: 1.96rem;
            height: 1.56rem;
            border: .04rem solid #fff;
            text-align: center;
            background-color: #fff;
            border-radius: .08rem;
            line-height: 1;
            h2 {
              padding: .4rem 0 .29rem;
              font-size: .3rem;
              color: #333;
            }
            span {
              font-size: .24rem;
              color: #333;
            }
          }
          & .current {
            border: .04rem solid #f63;
            h2 {
              color: #f63;
            }
            span {
              color: #f63;
            }
          }
        }
      }
      .sBottom {
        padding: .34rem .3rem .56rem;
        .subBtn {
          background-color: #ec1b30;
        }
        p {
          margin-top: .22rem;
          color: #999;
        }
      }
    }
    /*弹框*/
    .modalPeriod .zx-dialog-box{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    .modalPeriod .tipItem{
      display: flex;
    }
    .modalPeriod .tips .tipItem h4,
    .modalPeriod .tips .tipItem input,
    .modalPeriod .tips .tipItem p,
    .modalPeriod .tips .tipItem img{
      display: block;
      width: 30%;
      height: .48rem;
      flex-basis:30%;
    }
  }

</style>
